<template>
  <div>
    <!-- 显示用户列表的分配角色框 -->
    <el-dialog
      custom-class="role_dialog"
      v-model="isShowGiveRoles"
      title="分配角色"
      @close="hideGiveRoles"
    >
      <el-select
        v-model="selectArr"
        multiple
        placeholder="请选择"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="role_btn">
        <el-button @click="hideGiveRoles">取消</el-button>
        <el-button type="primary" @click="submitRoles">确定</el-button>
      </div>
    </el-dialog>

    <!-- 显示用户列表的编辑框 -->
    <el-dialog
      custom-class="mydialog"
      @close="hideEdit"
      v-model="isShowEdit"
      :title="userInfo.nickName === '' ? '新增角色' : '分配角色'"
    >
      <el-form class="myform" :model="newForm">
        <el-form-item label="账号：">
          <el-input v-model="newForm.username" />
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="newForm.nickName" />
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="newForm.email" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" v-model="newForm.password" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input rows="4" v-model="newForm.note" type="textarea" />
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio v-model="newForm.status" :label="1" size="large"
            >是</el-radio
          >
          <el-radio v-model="newForm.status" :label="0" size="large"
            >否</el-radio
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="large" @click="hideEdit">取消</el-button>
          <el-button size="large" type="primary" @click="test2">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  watch,
  watchEffect,
  onBeforeUnmount,
} from "vue";
import { updateUserInfoApi, updateUserRoles } from "../request/api";
import { ElMessageBox } from "element-plus";

// 定义父传子数据接口类型
interface propsItf<T> {
  isShowEdit: boolean;
  isShowGiveRoles: boolean;
  userInfo: T;
  selectedRolesArr: string[];
}

// 父传子数据
let props = defineProps<propsItf<userInfoItf>>();

// 定义双向绑定的数据
const state = reactive<{ newForm: userInfoItf }>({
  // 定义拷贝后的数据
  newForm: {
    username: "",
    nickName: "",
    email: "",
    password: "",
    note: "",
    status: 1,
    id: 1,
  },
});
let { newForm } = toRefs(state); // 解构
let selectArr = ref([""]); // 已选中的分配角色
// 分配角色可选项
const options = [
  {
    value: "商品管理员",
    label: "商品管理员",
  },
  {
    value: "订单管理员",
    label: "订单管理员",
  },
  {
    value: "超级管理员",
    label: "超级管理员",
  },
];

// 子传父的事件名集合
const emit = defineEmits([
  "hideEdit",
  "hideGiveRoles",
  "subEdit",
  "subGiveRoles",
  "subRegister",
]);

// 把父传子的数据进行拷贝，防止子组件编辑数据时造成父组件也修改
watch(
  () => props.userInfo,
  () => {
    newForm.value = { ...props.userInfo };
  }
);

// 监听props.selectedRolesArr的改变，如果值改变了就赋值给selectArr
watchEffect(() => {
  selectArr.value = props.selectedRolesArr;
});

/*
 * 定义方法
 *
 */

const test2 = () => {
  if (props.userInfo.nickName === "") {
    subRegister();
  } else {
    subEdit();
  }
};

// 新增用户
const subRegister = () => {
  // 拿到用户输入的数据，传递
  ElMessageBox.confirm("确定新增一个新用户？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      emit("subRegister", newForm.value);
    })
    .catch(() => {});
};

// 修改角色
const submitRoles = () => {
  let currentArr: string[] = [];
  selectArr.value.forEach(item => {
    item === "商品管理员" ? currentArr.push("1") : "";
    item === "订单管理员" ? currentArr.push("2") : "";
    item === "超级管理员" ? currentArr.push("5") : "";
  });
  let roleIds = currentArr.join(",");

  ElMessageBox.confirm("确定修改数据吗", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 调用接口修改数据
      updateUserRoles({
        adminId: newForm.value.id + "",
        roleIds,
      }).then(res => {
        // 成功，退出分配角色框
        emit("subGiveRoles");
      });
    })
    .catch(() => {});
};

// 关闭分配角色弹出框
const hideGiveRoles = () => {
  emit("hideGiveRoles");
};

// 关闭编辑弹出框
const hideEdit = () => {
  emit("hideEdit");
  // 重新将父组件数据赋值给子组件
  newForm.value = { ...props.userInfo };
};

// 提交编辑框
const subEdit = () => {
  ElMessageBox.confirm("确定修改数据吗", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateUserInfoApi(newForm.value.id, newForm.value).then(res => {
        if (res.code === 200) {
          // 退出编辑框
          emit("subEdit");
        }
      });
    })
    .catch(() => {});
};
</script>
<style lang="less" scoped>
:deep(.role_dialog) {
  width: 450px !important;
  .select-trigger {
    width: 170px;
    .el-input__inner {
      width: 170px !important;
    }
  }
  .role_btn {
    margin-top: 30px;
    transform: translate(65%);
  }
}
:deep(.mydialog .myform .el-input__inner) {
  width: 100% !important;
}
</style>
